<template>
  <div class="page">
    <div style="margin: 10px 0;">
        <input  type="file" @change="onVideoChange" accept="video/*" />
        <button v-if="video" @click="uploadVideo">上传视频</button>
    </div>

    <div style="margin-top: 10px;" v-if="url">
        <el-button type="primary" @click="go">查看视频</el-button>
    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="videoDate"
          label="视频时间">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="用户">
        </el-table-column>
        <el-table-column
          prop="videoUrl"
          label="视频地址">
            <template slot-scope="scope">
                <el-link :href="scope.row.videoUrl" target="_blank">查看视频</el-link>
            </template>
        </el-table-column>
        <el-table-column
          prop="dyHome"
          width="100"
          label="主页">
          <template slot-scope="scope">
            <img :src="scope.row.dyHome" alt="" style="width: 100%;" @click="goimg(scope.row.dyHome)">
            </template>
        </el-table-column>
        <el-table-column
          prop="code"
          width="100"
          label="二维码">
            <template slot-scope="scope">
                <img :src="scope.row.dyCode" alt="" style="width: 100%;" @click="goimg(scope.row.dyCode)">
            </template>
        </el-table-column>
        <el-table-column
          prop="status"
          width="100"
          fixed="right"
          label="状态">
            <template slot-scope="scope">
                <span v-if="scope.row.status == 0">等待接单</span>
                <el-select v-else size="small" v-model="scope.row.status" placeholder="请选择" @change="(val)=>changeStatus(val,scope.row)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
      width="60">
      <template slot-scope="scope">
        <el-popconfirm
            title="确定删除吗？"
            @confirm="delClick(scope.row)"
            >
            <el-button slot="reference" type="text" style="color: red;">删除</el-button>
        </el-popconfirm>
        
      </template>
    </el-table-column>
    </el-table>
    <el-button @click="delVideoAll" type="danger">删除所有视频</el-button>

  </div>
</template>
<script>
  import comm from "@/mixins/comm.js";
  export default {
      mixins: [comm],
  data() {
    return {
        video: null,
        url: "",
        options: [{
          value: '0',
          label: '等待中'
        },{
          value: '1',
          label: '发布中'
        }, {
          value: '2',
          label: '待审核'
        }, {
          value: '3',
          label: '合格'
        }, {
          value: '4',
          label: '失败'
        }],
        tableData: [{
            _id: '',
            videoDate: '2016-05-02',
            phone: '18107877888',
            videoUrl: 'http://dsadsads',
            dyHome: 'https://img1.baidu.com/it/u=1682899018,1321906558&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724518800&t=73dac198e18ca1c913563d2f25c5b443',
            code: 'https://img2.baidu.com/it/u=264848718,2125005227&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724518800&t=79271cbb9f4e86b0d3388d2236c54bf9',
            status: '1'
        }]
    };
    },
    async created() {
        this.init()
  },
    methods: {
        async init() {
            let res = await this.$awaitApi("dyAll")
            console.log(res)
            if (!res.err) {
                this.tableData = res.data.items
            }
        },
        go() {
            window.open(this.url,"_blank")
        },
        goimg(url){
          window.open(url,"_blank")
        },
        async changeStatus(val, row) {
            await this.$awaitApi("changeVideoStatus",row)
        },
    onVideoChange(e) {
      this.video = e.target.files[0];
    },
    async uploadVideo() {
        const formData = new FormData();
        formData.append('video', this.video);
        let res = await this.$awaitApi("upload", formData)
        if (!res.err) {
            this.$msgOk()
            this.url = res.data.url
            this.init()
        }
        },
        handleClick(row) {
            const dyHomeUrl = row.dyHome; // 替换为你要保存的图片链接
            const code = row.code
            let imageUrls = [dyHomeUrl, code]
            imageUrls.forEach(url => {
              let link = document.createElement('a');
              link.href = url;
              link.download = url.split('/').pop(); // 获取文件名
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            });
        },
        async delClick(row) {
            let res = await this.$awaitApi("delVideo", {_id:row._id})
            if (!res.err) {
                this.$msgOk("删除成功")
                this.init()
            }
        },
        async delVideoAll() {
            let confirm = await this.$confirm()
            if (confirm) {
                await this.$awaitApi("delVideoAll")
                this.init()
            }
        }
  }
};
</script>
<style scoped lang="less">
.el-link {
    font-size: 14px;
}
/deep/ .el-input__inner {
    padding: 0 !important;
    padding-left: 3px !important;
}
</style>